<template>
  <div class="callback-container">
    <div class="loading-card">
      <div class="spinner"></div>
      <h3>{{ statusText }}</h3>
      <p v-if="error">{{ error }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const statusText = ref('正在处理登录...')
const error = ref('')

const handleCallback = async () => {
  try {
    // 从URL参数中获取authCode
    const authCode = route.query.authCode || route.query.code
    
    if (!authCode) {
      throw new Error('未获取到授权码')
    }

    statusText.value = '正在验证身份...'

    // 调用后端API完成登录
    const response = await fetch('http://localhost:8000/api/dingtalk/callback', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        authCode: authCode,
        state: localStorage.getItem('dingtalk_state')
      })
    })

    if (!response.ok) {
      throw new Error('登录失败')
    }

    const data = await response.json()
    
    // 保存token
    localStorage.setItem('access_token', data.access_token)
    
    // 清除state
    localStorage.removeItem('dingtalk_state')
    
    statusText.value = '登录成功！'
    
    // 跳转到首页
    setTimeout(() => {
      router.push('/home')
    }, 1000)

  } catch (err) {
    console.error('登录错误:', err)
    statusText.value = '登录失败'
    error.value = err.message
  }
}

onMounted(() => {
  handleCallback()
})
</script>

<style scoped>
.callback-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 0;
}

.loading-card {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 24px;
  padding: 48px 56px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  min-width: 320px;
  max-width: 400px;
  margin: 0;
  box-sizing: border-box;
}

.spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 24px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff2442;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

h3 {
  color: #333;
  font-size: 20px;
  margin: 0 0 8px 0;
}

p {
  color: #ff2442;
  font-size: 14px;
  margin: 0;
}

/* 响应式设计 - 移动端适配 */
@media (max-width: 768px) {
  .loading-card {
    max-width: 90%;
    padding: 32px 24px;
    margin: 0 16px;
    border-radius: 16px;
  }

  h3 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .loading-card {
    max-width: 95%;
    padding: 24px 20px;
    margin: 0 8px;
  }

  h3 {
    font-size: 16px;
  }

  .spinner {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
  }
}

/* 横屏适配 */
@media (orientation: landscape) and (max-height: 600px) {
  .loading-card {
    padding: 24px 32px;
  }

  .spinner {
    width: 36px;
    height: 36px;
    margin-bottom: 16px;
  }
}
</style>

